<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="commons/header.jsp" %>
<style>
    .pagination {
        margin-top: 0;
        margin-bottom: 0;
    }

    .kind {
        margin: 20px;
    }
</style>
<div style="background-color: #ffffff; border-radius: 3px; padding: 12px;">

    <div id="goodsTableToolbar">
        <button class="btn btn-success" onclick="showAddGoodsModal()">添加</button>
    </div>
    <table id="goodsDataTable" class="table table-bordered table-striped"></table>
    <div class="modal" id="addGoodsModal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button onclick="destoryAddGoodsModal()" class="close">
                        <span>&times;</span>
                    </button>
                    <h3 class="modal-title">添加商品</h3>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" id="imageServerPath">
                        <div class="form-group">
                            <label for="title">标题</label>
                            <input class="form-control" autocomplete="off" id="title">
                        </div>
                        <div class="form-group">
                            <label for="items">种类</label>
                            <select class="form-control" id="items">
                            </select>
                        </div>
                        <div class="form-group">
                            <label>展示图<span style="color: red;">(在选择展示图之前必须选种类)</span></label>
                            <div style="margin-bottom: 6px;">
                                <img src="images/default.png" width="158px" id="preDisplayImage" height="180px">
                            </div>
                            <div class="file-upload-inner file-upload-inner-right ts-forms">
                                <div class="input append-small-btn">
                                    <div class="file-button">
                                        Browse
                                        <input id="displayImage" autocomplete="off" onchange="uploadDispalyImage(this)"
                                               type="file">
                                    </div>
                                    <input type="text" autocomplete="off" id="append-small-btn"
                                           placeholder="no file selected">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="price">价格</label>
                            <input class="form-control" autocomplete="off" id="price">
                        </div>
                        <div class="form-group">
                            <label for="stock">库存</label>
                            <input class="form-control" autocomplete="off" id="stock">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button onclick="destoryAddGoodsModal()" class="btn btn-danger">取消</button>
                    <button class="btn btn-success" onclick="addGoods()">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
<%@include file="commons/footer.jsp" %>
<script>
    //渲染表格
    $('#goodsDataTable').bootstrapTable({
        //访问地址
        url: 'http://localhost:8080/goods/goodsShow',
        //请求方法
        method: 'get',
        //列配置
        columns: [
            // title是表头的名字， field是返回的数据的字段名，align:'center'表示居中的意思
            {title: '类型', align: 'center', field: 'name'},
            {title: '商品编号', align: 'center', field: 'goodsId'},
            {title: '描述信息', align: 'center', field: 'title', formatter: formatTitle},
            {title: '价格', align: 'center', field: 'price'},
            {title: '状态', align: 'center', field: 'status', formatter: formatStatus},
            {title: '库存', align: 'center', field: 'stockNum'},
            {title: '创建日期', align: 'center', field: 'createTime', formatter: formatRegisterData},
            {title: '更新日期', align: 'center', field: 'updateTime', formatter: formatRegisterData},
            {title: '操作', align: 'center', formatter: formatoperation},

        ],
        pagination: true,  //表示使用分页

        sidePagination: 'server', //枚举值：client  server, 默认值是client
    })


    //添加删除按钮
    function formatoperation(value, row) {
        var goodsId = row.goodsId
        var status = row.status;
        return '<button onclick="deleteGoods(' + goodsId + ',' + status + ')" class="btn btn-danger btn-xs">可用/不可用</button>'
    }

    //格式化商品的状态
    function formatStatus(value) {
        if (value == 1) {
            return '<label class="label label-success">可用</label>'
        } else {
            return '<label class="label label-warning">不可用</label>'
        }
    }

    /**
     * 当内容长度大于30的时候，多余的不显示
     * @param value
     * @returns {string|*}
     */
    function formatTitle(value) {
        var length = value.length;//获取文本长度
        if (length > 25) {
            return value.substring(0, 25) + '....';
        }
        return value;
    }

    //格式化时间
    function formatRegisterData(value) {
        return moment(value).format("YYYY-MM-DD hh:mm:ss");
    }

    // 删除对应的商品，实际就是改状态
    function deleteGoods(goodsId, status) {
        var yang;
        if (status==0){
            yang=1;
        }
        if (status==1){
            yang=0;
        }

        console.log("yang::"+yang)
        $.ajax({

            url: '${pageContext.servletContext.contextPath}/goods/goodsAlter/'+goodsId+'/'+yang,
            // data: {goodsId: goodsId, status: status},
            type: 'get',
            success: function (_data) {
                // 表示删除成功，更新表格
               console.log("_data:"+_data)
                if (_data == 0) {
                    //刷新
                    $('#goodsDataTable').bootstrapTable('refresh');
                } else {
                    //删除失败提示信息
                    Lobibox.notify('error', {
                        delay: 2000,//持续时间
                        title: '警告',
                        msg: '已经是不可用状态，请勿重复点击',
                        size: 'mini',// normal, mini, large  大小
                    })
                }

            }
        })
    }

    /**
     * 展示添加的模态框
     *   1. 首先将所有种类查出来，渲染在模态框中的种类下拉列表中
     *   2. 显示模态框
     */
    /**
     * 添加下拉框种类
     * 并显示模态框
     */
    function showAddGoodsModal() {

        var items = $('#items');
        items.empty(); //清空种类的下拉列表
        /**
         * 第一个参数url地址
         * 第二个参数是请求的参数
         * 第三个参数是回调方法。
         */
        $.getJSON('${pageContext.servletContext.contextPath}/goods/adminItem', {}, function (_data) {
            console.log("种类" + _data)
            for (var i = 0; i < _data.length; i++) {
                var item = _data[i];
                // <option value="3#shoes">鞋子</option>
                items.append('<option value="' + (item.id + '#' + item.alias) + '">' + item.name + '</option>')
            }
        });
        $('#addGoodsModal').modal('show');
    }

    /**
     * 隐藏模态框
     *
     */
    function destoryAddGoodsModal() {
        resetModal();
        $("#addGoodsModal").modal('hide');

    }

    /**
     * 重置模态框内容（清空）
     */
    function resetModal() {
        $('#imageServerPath').val('');
        $('#title').val('');
        $('#items').empty();//清空下拉列表
        $('#preDisplayImage').prop('src', '../images/default.png');
        $('#displayImage').val('');
        $('#append-small-btn').val('');
        $('#price').val('');
        $('#stock').val('');
    }

    /**上传图片
     * 1.在选择图片旁边的那个输入框中显示文件的名字；
     *    2.上传图片。
     *    3.回显图片
     */
    function uploadDispalyImage(fileTag) {
        var item = $('#items').val(); //取种类的值，目的是上传的文件放在哪个目录下

        var itemAlias = item.split('#')[1];

        var displayImage = fileTag.files[0];
        // console.log(displayImage.name)  //文件的名字，在很多网站中要去判断文件的格式是否正确，要通过后缀来判断
        // console.log(displayImage.size); // 文件的大小，单位是字节，如果要判断多少 M, size / (1024 * 1024) 结果单位就位M
        var name = displayImage.name;

        $('#append-small-btn').val(name);

        var formData = new FormData();
        formData.append('displayImage', displayImage);
        formData.append('itemAlias', itemAlias);
        // formData.append('uploadDisplayImage', 'uploadDisplayImage')

        $.ajax({
            url: "${pageContext.servletContext.contextPath}/uploadDispalyImage",
            type: 'post',
            dataType: 'json',
            data: formData,
            /**
             * 内容类型。默认值：application/x-www-form-urlencoded;
             * false表示不设置，将FormData原封不动的直接提价服务器端
             */
            contentType: false,
            /**
             * processData 处理数据， 例如get请求，会将data中的数据，name=张三&password=125,
             * 对于FormData包含文件，此处要为false, 禁止转换
             */
            processData: false,
            success: function (_data) {
                // console.log("图片回显：" + _data)
                // {"filePath":"mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg","imageUrl":"http://localhost/mobile/147617383170300EfssbV3XDA8PFrTsSj.jpg"}
                $('#preDisplayImage').prop('src', _data.imageUrl);  //回显图片
                $('#imageServerPath').val(_data.filePath);
            }
        })
    }

    /**
     * 添加商品后确定
     */
    function addGoods() {
        var imageServerPath = $('#imageServerPath').val();
        var title = $('#title').val();
        var item = $('#items').val();
        var itemId = item.split('#')[0];
        var price = $('#price').val();
        var stock = $('#stock').val();
        //请求对象
        var requestParams = {
            smallPic: imageServerPath,
            title: title,
            item: item,
            itemId: itemId,
            price: price,
            stockNum: stock,
        }

        if (imageServerPath==null||imageServerPath==""||title==null||title==""||itemId==null||itemId==""||price==null||price==""||stock==null||stock==""){
            showErrorBox('添加商品失败,请填完整商品信息')
            return;
        }
        var url = "http://localhost:8080/insert.do";
        $.post(
            url,
            requestParams,
            function (_data) {
                if (_data.code == 1) {
                    setTimeout(function () {
                        show("添加成功");
                    }, 500);
                    destoryAddGoodsModal(); //销毁添加商品模态框
                    $('#goodsDataTable').bootstrapTable('refresh');
                }
                if (_data.code == -1) {
                    showErrorBox('添加商品失败,请填完整商品信息')
                }
            }, 'json')


    }


</script>

